<script>
import pubsub from "pubsub-js";
import axios from "axios";

export default {
  name: "JobMain",
  data() {
    return {
      centerDialogVisible: false,
      selectedJob: {}, // 存储选中的岗位数据
      resumes: [], // 存储简历列表
      selectedResume: null, // 存储选中的简历
    };
  },
  methods: {
    submit() {
      // 提交简历数据
      if (!this.selectedResume) {
        this.$message.error("请先选择一份简历！");
        return;
      }

      const data = {
        userId: this.$store.state.id,
        jobId: this.selectedJob.id,
        resumeId: this.selectedResume.id, // 提交选中的简历ID
        companyId: this.selectedJob.companyId,
      };

      console.log("提交的数据", data);
      axios.post("http://localhost:8080/resume/submit_job", data)
          .then(response => {
            this.$message.success("简历提交成功！");
            this.centerDialogVisible = false; // 关闭弹窗
          })
          .catch(error => {
            // this.$message.error("提交失败，请稍后再试！");
          });
    },
    putResume() {
      console.log("我要投递简历");

      axios.get(`http://localhost:8080/resume/user/3`, {
      }).then(response => {
        console.log(response.data.data);
        this.resumes = response.data.data;
        console.log("我收到了resumes", this.resumes);
      }).catch(error => {
        console.error(error);
      });

      this.centerDialogVisible = true; // 打开选择简历弹窗
    },
    selectResume(resume, index) {
      // 选中简历时更新 selectedResume
      this.selectedResume = resume;
      this.$message.success(`已选择简历 ${index + 1}`);
    }
  },

  mounted() {
    // 订阅 selectedJob 频道，接收并展示选中的岗位数据
    this.selectedJobId = pubsub.subscribe("selectedJob", (msg, jobData) => {
      console.log("我Main收到了jobData", jobData);
      this.selectedJob = jobData; // 将选中的岗位数据赋值给 selectedJob
    });
  },

  beforeDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    pubsub.unsubscribe(this.selectedJobId);
  }
};
</script>

<template>
  <div>
    <div class="main">
      <div class="resume-layout">

        <div class="card-header">
          <div class="job-title">{{ selectedJob.title }}</div>
        </div>

        <div class="section">
          <div class="green-line"></div>
          <div class="title">发布公司</div>
          <div class="content">{{ selectedJob.company_name }}</div>
        </div>

        <div class="section">
          <div class="green-line"></div>
          <div class="title">工资</div>
          <div class="job-salary">{{ selectedJob.salaryL }}-{{ selectedJob.salaryR }}K</div>
        </div>

        <div class="section">
          <div class="green-line"></div>
          <div class="title">工作内容</div>
          <div class="content">{{ selectedJob.duties }}</div>
        </div>

        <div class="section">
          <div class="green-line"></div>
          <div class="title">工作要求</div>
          <div class="content">
            {{ selectedJob.requests }}
          </div>
        </div>

        <div class="section">
          <div class="green-line"></div>
          <div class="title">优先录取条件</div>
          <div class="content">
            {{ selectedJob.requests }}
          </div>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
          <span>请选择您需要投递的简历</span>
          <div class="left">
            <div class="resume-nav" style="margin: 0 50px; margin-top: 15px; display: flex; flex-direction: column; align-items: center;">
              <div class="nav-header" style="width: 100%; display: flex; align-items: center;">
                <span style="margin-left: 18px;">简历目录</span>
              </div>
              <el-menu
                  :default-active="activeIndex"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                  style="width: 100%;"
              >
                <el-menu-item
                    v-for="(resume, index) in resumes"
                    :key="index"
                    :index="(index + 1).toString()"
                    @click="selectResume(resume, index)"
                >
                  简历{{ index + 1 }}
                </el-menu-item>
                <el-divider></el-divider>
              </el-menu>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确认并提交简历</el-button>
          </span>
        </el-dialog>

        <el-button @click.native="putResume()" type="success">
          投递简历
        </el-button>

      </div>
    </div>
  </div>
</template>


<style scoped>
.job-salary {
  color: #f56c6c;
  font-size: 20px;
  margin-top: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}


.job-title {
  font-size: 50px; /* 增大岗位标题 */
  font-weight: bold;
}


.job-footer span {
  margin-left: 10px;
}


.left {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 10px;
}


.nav-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  height: 48px;
  background-color: #f0f0f0;
  width: 100%;
}

.resume-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section {
  text-align: left;
  margin-bottom: 20px;
}


.title {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
}

.content {
  margin-top: 10px;
  font-size: 18px;
}

.green-line {
  width: 5px;
  height: 20px;
  background-color: rgb(20, 203, 20);
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}
</style>
